<template>
  <div class="essay-question-container">
    <!-- 富文本编辑器 -->
    <div class="editor-wrapper">
      <WangEditor
        ref="editorQuill"
        v-model="editorContent"
        @input="handleEditorChange"
      />
    </div>

    <!-- 文件上传区域 -->
    <div class="upload-section" v-if="showFileUpload">
      <div class="section-header">
        <span class="title">附件上传</span>
        <span class="tip" v-if="showUploadTip">
          支持上传 {{ allowedExtensions.join(', ') }} 格式文件
          <template v-if="maxFileSize">，单个文件不超过 {{ maxFileSize }}MB</template>
        </span>
      </div>
      <file-upload-plus
        ref="fileUpload"
        v-model="fileList"
        :limit="maxFiles"
        :max-size="maxFileSize"
        :accept="allowedExtensions"
        :disabled="disabled || !showFileUpload"
        @change="handleFileChange"
      />
    </div>
  </div>
</template>

<script>
import WangEditor from "@/components/WangEditor/index2.vue";
import FileUploadPlus from "@/components/FileUploadPlus/index.vue";

export default {
  name: 'EssayQuestion',
  components: {
    WangEditor,
    FileUploadPlus
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    files: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    maxFiles: {
      type: Number,
      default: 10
    },
    maxFileSize: {
      type: Number,
      default: 20
    },
    allowedExtensions: {
      type: Array,
      default: () => ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'jpg', 'jpeg', 'png', 'zip', 'rar']
    },
    showUploadTip: {
      type: Boolean,
      default: true
    },
    showFileUpload: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      editorContent: this.value,
      fileList: this.files || []
    };
  },
  watch: {
    value(newVal) {
      if (newVal !== this.editorContent) {
        this.editorContent = newVal;
        // 手动触发编辑器内容更新
        if (this.$refs.editorQuill && this.$refs.editorQuill.setContent) {
          this.$refs.editorQuill.setContent(newVal);
        }
      }
    },
    immediate: true, // 确保初始化时也触发
    files(newFiles) {
      this.fileList = newFiles || [];
    }
  },
  methods: {
    // 设置编辑器内容
    setContent(content) {
      this.editorContent = content || '';
      if (this.$refs.editorQuill && this.$refs.editorQuill.setContent) {
        this.$refs.editorQuill.setContent(this.editorContent);
      }
    },

    // 获取纯文本内容
    getPlainContent() {
      if (this.$refs.editorQuill?.getText) {
        return this.$refs.editorQuill.getText();
      }
      return '';
    },

    handleEditorChange(content) {
      this.$emit('input', content);
      this.$emit('change', {
        content: content,
        files: this.fileList
      });
    },

    handleFileChange(files) {
      this.fileList = files;
      this.$emit('update:files', files);
      this.$emit('change', {
        content: this.editorContent,
        files: files
      });
    },

    // 设置文件列表
    setFiles(files) {
      this.fileList = files || [];
      if (this.$refs.fileUpload) {
        this.$refs.fileUpload.initFileList(files);
      }
    },

    // 获取文件ID列表
    getFileIds() {
      return this.fileList.map(file => file.fileId).join(',');
    },

    // 清空内容
    clear() {
      this.editorContent = '';
      this.fileList = [];
      if (this.$refs.editorQuill && this.$refs.editorQuill.setContent) {
        this.$refs.editorQuill.setContent('');
      }
      if (this.$refs.fileUpload) {
        this.$refs.fileUpload.clearFiles();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.essay-question-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;

  .editor-wrapper {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.3s;

    &:hover {
      border-color: #c0c4cc;
    }
  }

  .upload-section {
    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .title {
        font-size: 15px;
        font-weight: 600;
        color: #333;
      }

      .tip {
        margin-left: 12px;
        font-size: 12px;
        color: #909399;
      }
    }
  }
}
</style>
